<template>
  <div class="shopdetail">
    <header>
      <div>
        <div class="hd-l" @click='detail' >
          <i class="iconfont icon-fanhui"></i>
        </div>
        <h2>商家详情</h2>
      </div>
    </header>
    <div>
      <div class="modal-content">
        <div class="shop-info">
          <section class="section">
            <h3 class="section-title">活动与属性</h3>
            <div>
              <div class="activity-container" :key='index' v-for='(it, index) in shop.obj.activities' >
                <span class="activity-icon" :style="{backgroundColor:'#'+it.icon_color}" >{{it.icon_name}}</span> 
                <span class="activity-description">{{it.tips}}</span>
              </div>
            </div>
          </section>
          <!-- <section class="section"></section> -->
          <section class="section">
            <h3 class="section-title">商家信息</h3>
            <ul class="detail-list">
              <li class='list-li' v-if='shop.obj.description' >{{shop.obj.description}}</li> <!----> 
              <li class='list-li' >地址：{{shop.obj.address}}</li> 
              <li v-if='shop.obj.opening_hours' class='list-li' >营业时间：{{shop.obj.opening_hours[0]}}</li> <!----> <!---->
            </ul>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'pingjia',
    computed: {
      ...mapState(['shop'])
    },
    methods: {
      detail: function () {
        this.$store.commit('SHOWDETAIL')
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../static/hotcss/px2rem';
  .shopdetail{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    z-index: 100;
    background-color: #fff;
    header {
      height: px2rem(44);
      >div {
        position: fixed;
        width: 100%;
        height: px2rem(44);
        z-index: 100;
        background-image: linear-gradient(to right, #00AAFF 0%, #0086FF 100%);
      }
      .hd-l {
        display: inline-block;
        width: px2rem(44);
        height: px2rem(44);
        text-align: center;
        vertical-align: top;
        line-height: px2rem(44);
        i {
          font-size: px2rem(18);
          color: #FFF;
        }
      }
      h2 {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        color: #FFF;
        line-height: px2rem(44);
        font-size: px2rem(18);
      }
    }
    .modal-content{
      height: 100%;
      box-sizing: border-box;
      overflow: auto;
      .shop-info{
        padding-top: px2rem(10);
        background-color: #eee;
        // font-size: .346667rem;
        overflow-y: auto;
        .section{
          margin-bottom: px2rem(10);
          padding: 0 px2rem(15) px2rem(15);
          // font-size: .346667rem;
          background-color: #fff;
          color: #666;
          .section-title{
            margin: 0 px2rem(-15);
            padding: px2rem(8) px2rem(15);
            border-bottom: 1px solid #eee;
            color: #333;
            font-weight: 400;
            font-size: px2rem(12);
            line-height: px2rem(22.5);
          }
          .activity-container{
            margin: px2rem(15) 0;
            height: px2rem(16);
            line-height: px2rem(16);
            span{
              font-size: px2rem(11);
            }
            .activity-icon{
              color: #fff;
            }
          }
          .detail-list{
            .list-li{
              display: flex;
              padding: px2rem(15) px2rem(5) px2rem(15) 0;
              justify-content: space-between;
              margin-right: px2rem(15);
              &:not(:first-child){
                border-top: 1px solid #ddd;
              }
            }
          }
        }
      }
    }
  }
</style>